<template>
  <div style="display: flex; flex-direction: column; width: 200px">
    21312312
<!--    <el-select-->
<!--      class="isselect"-->
<!--      clearable-->
<!--      v-model="selectedOption"-->
<!--      placeholder="请选择搜索时间范围"-->
<!--      @change="handleOptionChange"-->
<!--    >-->
<!--      <el-option label="一日" value="day"></el-option>-->
<!--      <el-option label="一周" value="week"></el-option>-->
<!--      <el-option label="自由拉取时间" value="custom"></el-option>-->
<!--    </el-select>-->
<!--    <el-date-picker-->
<!--      ref="datePicker"-->
<!--      v-model="dateRange"-->
<!--      type="daterange"-->
<!--      range-separator="至"-->
<!--      start-placeholder="开始日期"-->
<!--      end-placeholder="结束日期"-->
<!--      style="opacity: 0"-->
<!--    >-->
<!--    </el-date-picker>-->
<!--    &lt;!&ndash;新增对话框&ndash;&gt;-->
<!--    <el-dialog-->
<!--      title="新增节假日信息"-->
<!--      :visible.sync="dialogFormVisible"-->
<!--      width="30%"-->
<!--    >-->
<!--      <el-form :model="addform" label-width="80px">-->
<!--        <el-form-item label="选择日期:">-->
<!--          <el-date-picker-->
<!--            type="dates"-->
<!--            v-model="addform.moreDate"-->
<!--            placeholder="选择一个或多个日期"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="备注信息:">-->
<!--          <el-input-->
<!--            v-model="addform.remark"-->
<!--            autocomplete="off"-->
<!--            clearable-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="addSubmit">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: "",
      dateRange: [],
      dialogFormVisible: true,
      moreDate: "",
      addform: {
        moreDate: "",
        remark: "",
      },
    };
  },
  methods: {
    addSubmit() {
      //提交
      console.log(this.addform);
    },
    handleOptionChange() {
      if (this.selectedOption === "custom") {
        this.$nextTick(() => {
          this.$refs.datePicker.focus();
        });
      } else {
        // this.$refs.datePicker.$el.style.display = "none";
      }
    },
  },

  mounted() {
    // if (this.selectedOption === "custom") {
    //   // this.$refs.datePicker.$el.style.display = "block"; // 组件加载时如果选择了自由拉取时间，显示日期区间选择器
    // } else {
    //   this.$refs.datePicker.$el.style.height = "0";
    // }
  },
};
</script>

<style lang="scss" scoped></style>
